<template>
	<view class="my-container">
		<view class="user-info">
			<!-- <image class="avatar" src="/static/avatar.png"></image> -->
			<view class="user-detail">
				<view class="username">用户名</view>
				<view class="user-id">ID: 10086</view>
			</view>
		</view>
		<custom-tab-bar></custom-tab-bar>
	</view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'

export default {
	components: {
		CustomTabBar
	},
	data() {
		return {
		}
	},
	onShow() {
		uni.hideTabBar()
	},
	methods: {
		
	}
}
</script>

<style>
.my-container {
	padding: 20px;
	background-color: #f8f8f8;
}

.user-info {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.avatar {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	margin-right: 15px;
}

.user-detail {
	flex: 1;
}

.username {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.user-id {
	font-size: 14px;
	color: #999;
}

.menu-list {
	background-color: #ffffff;
	border-radius: 10px;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #f2f2f2;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item-content {
	display: flex;
	align-items: center;
}

.menu-icon {
	margin-right: 10px;
	font-size: 20px;
}

.menu-title {
	font-size: 16px;
}

.menu-arrow {
	font-size: 20px;
	color: #cccccc;
}
</style> 